<template>
    <div class="userEvaluate" ref="userEvaluateRef">
        <Title>用户评价</Title>
        <el-carousel style="margin-top: 10px;" :height="state.height" :motion-blur="false" autoplay direction="vertical"
            :pause-on-hover="state.pauseOnHover" :interval="5000">
            <el-carousel-item v-for="(item, index) in state.data" :key="index">
                <div class="item" v-for="it in item" :key="it.id">
                    <div class="name text">{{ it.name }}</div>
                    <div class="content text">{{ it.content }}</div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import Title from './title.vue';
import request from '/@/utils/request'
import { chunk } from 'lodash'
const state = reactive({
    data: '',
    height: '190px',
    pauseOnHover: false
})
const getNews = () => {
    const data = [
        {
            "id": 1,
            "time": "2023-01-03 16:00",
            "city": "德清1",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        },
        {
            "id": 2,
            "time": "2023-01-03 16:00",
            "city": "德清2",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        },
        {
            "id": 3,
            "time": "2023-01-03 16:00",
            "city": "德清3",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        },
        {
            "id": 4,
            "time": "2023-01-03 16:00",
            "city": "德清4",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        },
        {
            "id": 5,
            "time": "2023-01-03 16:00",
            "city": "德清5",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        },
        {
            "id": 6,
            "time": "2023-01-03 16:00",
            "city": "德清6",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        },
        {
            "id": 7,
            "time": "2023-01-03 16:00",
            "city": "德清7",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        },
        {
            "id": 8,
            "time": "2023-01-03 16:00",
            "city": "德清8",
            "name": "张三",
            "mobile": "150****0911",
            "content": "预约了全屋清洁(11月23日/500平方米/3人)"
        }
    ]
    state.data = chunk(data, 5)
    return
    // 以上是模拟数据，真是数据通过接口传入，如下
    request({
        url: 'analysisJudgment/getCategorize',
        method: 'post',
        data: {
        }
    }).then(res => {
        state.data = chunk(res, 5)
        if (chatDistance) {
            setData()
        }
    })
}
const userEvaluateRef = ref()
const getHeight = () => {
    const { offsetHeight } = userEvaluateRef.value
    console.log(offsetHeight)
    state.height = offsetHeight - 72 + 'px'
}
onMounted(() => {
    getNews()
    setTimeout(() => {
        getHeight()
        state.pauseOnHover = true
    }, 0);
});
</script>
<style lang="scss" scoped>
.userEvaluate {
    height: 100%;
    padding: 20px 25px;
    box-sizing: border-box;

    :deep(.el-carousel__indicators) {
        display: none;
    }

    .item {
        height: 20%;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding: 0 15px;

        &:nth-child(2n) {
            background-color: rgba(4, 206, 203, 0.1);
        }

        .text {
            font-size: 15px;
            color: rgba(255, 255, 255, 1);
            flex-shrink: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .name {
            width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content {
            flex: 1;
        }
    }
}
</style>